aboutsummaryrefslogtreecommitdiff
path: root/src/app/anime/[id]/page.jsx
blob: 7715dc6e7e5ba9701ef5ccab898a6150495629f8 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import Image from "next/image";

import { anime_info } from "../data-fetch/request";
import styles from "../styles/info.module.css";
import EpisodesButtons from "../components/episode_buttons";

import { preFetchVideoLinks } from "../components/cacher";

const AnimeInfoHomepage = async ({ params }) => {
	const id = params.id;
	const data = await anime_info(id);

	const sliceLength = Math.min(data.episodes.length, 49);
	preFetchVideoLinks(data.episodes.slice(0, sliceLength));

	return (
		<main className={styles.main}>
			<div>
				{data && (
					<section className={styles.AnimeInfo}>
						<div className={styles.AnimeHeroSection}>
							<Image
								src={data.image}
								width={200}
								height={300}
								alt="Anime Poster"
								priority
							/>
							<div>
								<p className={styles.animeTitle}>
									<strong
										style={{ color: "var(--neon-green)" }}
									>
										{data.title || "Not Found"}
									</strong>
								</p>
								<p className={styles.animeDescription}>
									<strong>Description: </strong>
									{data.description || "Not Found"}
								</p>
								<hr style={{ borderColor: "gray" }} />
								<span>
									<strong style={{ marginRight: 5 }}>
										Genres:
									</strong>
									{data.genres &&
										data.genres.map((item, index) => (
											<span key={index}>
												{item}
												{index !==
													data.genres.length - 1 &&
													", "}
											</span>
										))}
								</span>
								<p>
									<strong>Episodes:</strong>{" "}
									{data.totalEpisodes || "Not Found"}
								</p>
								<p>
									<strong>Release year:</strong>{" "}
									{data.releaseDate || "Not Found"}
								</p>
								<p>
									<strong>Status:</strong>{" "}
									{data.status || "Not Found"}
								</p>
								<p>
									<strong>Type:</strong>{" "}
									{data.type || "Not Found"}
								</p>
							</div>
						</div>
					</section>
				)}
			</div>
			<EpisodesButtons data={data} />
		</main>
	);
};

export default AnimeInfoHomepage;